<template>
  <div class="explorer-header">
    <div class="explorer-header__icon">
      <!-- 空图标列 -->
    </div>

    <div class="explorer-header__name" @click="sortBy('name')">
      <span>名称</span>
      <el-icon
        v-if="fileStore.sortField === 'name'"
        class="explorer-header__sort-icon"
        :class="{ reverse: fileStore.sortOrder === 'desc' }"
      >
        <ArrowUp />
      </el-icon>
    </div>

    <div class="explorer-header__date" @click="sortBy('lastModified')">
      <span>修改日期</span>
      <el-icon
        v-if="fileStore.sortField === 'lastModified'"
        class="explorer-header__sort-icon"
        :class="{ reverse: fileStore.sortOrder === 'desc' }"
      >
        <ArrowUp />
      </el-icon>
    </div>

    <div class="explorer-header__size" @click="sortBy('size')">
      <span>大小</span>
      <el-icon
        v-if="fileStore.sortField === 'size'"
        class="explorer-header__sort-icon"
        :class="{ reverse: fileStore.sortOrder === 'desc' }"
      >
        <ArrowUp />
      </el-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ArrowUp } from "@element-plus/icons-vue";
import { useFileStore } from "../stores/fileStore";

const fileStore = useFileStore();

const sortBy = (field: string) => {
  if (fileStore.sortField === field) {
    // 切换排序顺序
    fileStore.sortOrder = fileStore.sortOrder === "asc" ? "desc" : "asc";
  } else {
    // 新字段，默认升序
    fileStore.sortField = field;
    fileStore.sortOrder = "asc";
  }
  // 触发重新排序（通过响应式计算属性自动处理）
};
</script>

<style scoped lang="scss">
.explorer-header {
  display: grid;
  grid-template-columns: 32px 1fr 140px 100px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0 !important;
  font-weight: 500;
  font-size: 13px; // 统一为13px，与FileListItem一致
  color: #606266;
  height: 40px; // 固定高度，与FileListItem保持一致
  user-select: none;
  box-sizing: border-box;
  position: relative;
  z-index: 50; // 确保header在较高层级

  // 使用多重方法确保边框始终存在
  &::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #f0f0f0 !important;
    z-index: 999; // 最高优先级
    pointer-events: none; // 不干扰交互
  }

  // 额外的box-shadow作为备份边框
  box-shadow: inset 0 -1px 0 0 #f0f0f0 !important;

  &__icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &__name,
  &__date,
  &__size {
    display: flex;
    align-items: center;
    height: 100%; // 占满父容器高度，确保垂直居中
    gap: 4px;
    cursor: pointer;
    padding: 4px 0;
    border-radius: 3px;
    transition: background-color 0.2s ease;
    font-size: 13px;

    &:hover {
      background: #e6f7ff !important;
      color: #409eff !important;
      // 确保hover时不会影响父级边框
      border: none !important;
      outline: none !important;
      // 使用inset box-shadow，不影响布局
      box-shadow: inset 0 0 0 1px var(--el-color-primary-light-7) !important;
    }
  }

  &__size {
    justify-content: flex-end;
  }

  &__sort-icon {
    font-size: 12px;
    transition: transform 0.2s ease;

    &.reverse {
      transform: rotate(180deg);
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .explorer-header {
    grid-template-columns: 28px 1fr 80px;
    gap: 8px;
    padding: 8px;

    &__date {
      display: none;
    }
  }
}
</style>
